<template>
  <div class="login">
    <div class="input-box">
      <input type="text" placeholder="请输入用户名" v-model="userName" />
      <input type="password" placeholder="请输入密码" v-model="psw" />
    </div>
    <div @click="login" class="login-btn">登陆</div>
    <div @click="fakeLogin" class="login-btn">不登录访问（测试用）</div>
  </div>
</template>

<script>
import {logincontrollerLogin} from '@/assets/js/api';
import {Dialog} from 'vant';
export default {
  data() {
    return {
      userName: '',
      psw: ''
    };
  },
  mounted() {},
  methods: {
    login() {
      if (!this.userName) {
        this.$toast('请输入用户名');
        return false;
      }
      if (!this.psw) {
        this.$toast('请输入密码');
        return false;
      }
      logincontrollerLogin({loginName: this.userName, loginPwd: this.psw}).then((res) => {
        if (res.pkValue) {
          localStorage.dspToken = res.pkValue;
          localStorage.dspTokenData = Date.parse(new Date());
          this.$router.push({
            name: 'Index'
          });
        } else {
          this.$toast(res.errorInfo);
        }
      });
    },
    fakeLogin() {
      Dialog.confirm({
        message: '不登录直接进入系统吗？(跳过登录可能会导致部分功能不正常)'
      }).then(() => {
        localStorage.dspToken = 'none';
        this.$router.push('/');
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  background: url(../assets/images/loginbg.jpg) no-repeat center center;
  background-size: 100% 100%;
  .input-box {
    margin: 500px 80px 0 80px;
    input {
      width: 100%;
      height: 87px;
      background-color: #fff;
      &:not(:last-child) {
        margin-bottom: 37px;
      }
      font-size: 34px;
      text-indent: 2em;
      border-radius: 4px;
      &:first-child {
        background-image: url(../assets/images/account.png);
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 34px 38px;
      }
      &:last-child {
        background-image: url(../assets/images/password.png);
        background-repeat: no-repeat;
        background-position: 20px center;
        background-size: 34px 38px;
      }
    }
    input::placeholder {
      color: #666464;
    }
  }
  .login-btn {
    height: 88px;
    line-height: 88px;
    margin: 0 80px;
    color: #ffffff;
    background: url(../assets/images/login-btn.png) no-repeat center center;
    background-size: cover;
    border-radius: 44px;
    text-align: center;
    margin-top: 91px;
    font-size: 40px;
  }
}
</style>
